<!-- 总床位数 -->
<template>
    <div id="overview">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="" width="110">
                <template slot="header">
                    <img src="../../assets/image/chartList/bed.png" alt=""
                        style="width: 30px; height: 30px; margin: 5px 0 0 15px" />
                </template>
            </el-table-column>
            <el-table-column prop="h0" label="人民医院" width="110" align="center">
            </el-table-column>
            <el-table-column prop="h1" label="二院" width="75" align="center">
            </el-table-column>
            <el-table-column prop="h2" label="中医院" width="85" align="center">
            </el-table-column>
            <el-table-column prop="h3" label="乡镇卫生院" width="110" align="center">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getBedData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {
            tableData: [
                {
                    date: "已用床位",
                    h0: "",
                    h1: "",
                    h2: "",
                    h3: "",

                },
                {
                    date: "未用床位",
                    h0: "",
                    h1: "",
                    h2: "",
                    h3: "",

                },
                {
                    date: "总床位",
                    h0: 0,
                    h1: 0,
                    h2: 0,
                    h3: 0,

                },
            ],
        };
    },
    mounted() {
        this.sortData()
    },
    methods: {

        sortData() {
            // const data = [
            //     {
            //         VALUE1: 11,
            //         VALUE2: 22
            //     },
            //     {
            //         VALUE1: 11,
            //         VALUE2: 22
            //     },
            //     {
            //         VALUE1: 11,
            //         VALUE2: 22
            //     },
            //     {
            //         VALUE1: 11,
            //         VALUE2: 22
            //     }
            // ]
            const data = [
                {
                    "VALUE1": Mock.Random.integer(10, 20),
                    "VALUE2": Mock.Random.integer(10, 20)
                },
                {
                    "VALUE1": Mock.Random.integer(10, 20),
                    "VALUE2": Mock.Random.integer(10, 20)
                },
                {
                    "VALUE1": Mock.Random.integer(10, 20),
                    "VALUE2": Mock.Random.integer(10, 20)
                },
                {
                    "VALUE1": Mock.Random.integer(10, 20),
                    "VALUE2": Mock.Random.integer(10, 20)
                },
            ]

            data.forEach((item, index) => {
                this.tableData[0]["h" + index] = item.VALUE2 + '张';
                this.tableData[1]["h" + index] = item.VALUE1 + '张';
                this.tableData[2]["h" + index] = (parseInt(item.VALUE1) + parseInt(item.VALUE2)) + '张';
            });
        },
    },
};
</script>
<style lang="scss">
#overview {
    width: 100%;
    height: 100%;

    .el-table {
        &::before {
            height: 0px;
        }

        background-color: transparent;

        td.el-table__cell {
            background: transparent;
        }

        th.el-table__cell {
            background: transparent;
        }

        tr {
            background-color: transparent;
        }

        th.el-table__cell.is-leaf,
        td.el-table__cell {
            border-bottom: none;
        }

        thead {
            color: #fff;
            font-size: 18px;
        }

        td {
            color: #fff;
            font-size: 18px;
        }
    }
}
</style>